<template>
  <div class="prodInfo">
    <div class="prodInfo-nr">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="产品图片">
          <el-upload
            action="/api/admin/file/upload/element"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio label="上架" :value="1"></el-radio>
            <el-radio label="下架" :value="0"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="产品分类">
          <el-cascader
            :options="cpflArr"
            :props="{ checkStrictly: true, expandTrigger: 'hover' }"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="产品分组">
          <el-select v-model="form.tagList" placeholder="请选择">
            <el-option
              :label="item.title"
              :value="item.id"
              v-for="(item, index) in cpfzArr"
              :key="index"
              ></el-option>
              <!-- :props="props" -->
          </el-select>
        </el-form-item>
        <el-form-item label="产品名称">
          <el-input
            v-model="form.prodName"
            placeholder="产品名称"
            style="width: 30%"
          ></el-input>
        </el-form-item>
        <el-form-item label="产品卖点">
          <el-input
            type="textarea"
            v-model="form.brief"
            style="width: 30%"
            placeholder="产品卖点"
          ></el-input>
        </el-form-item>
        <el-form-item label="配送方式">
          <el-checkbox
            label="商家配送"
            v-model="form.deliveryModeVo.hasShopDelivery"
            @change="yfszFlag = !yfszFlag"
          ></el-checkbox>
          <el-checkbox
            label="用户自提"
            v-model="form.deliveryModeVo.hasUserPickUp"
          ></el-checkbox>
        </el-form-item>
        <el-form-item label="运费设置" v-if="yfszFlag">
          <el-select v-model="form.region" placeholder="请选择">
            <el-option
              :label="item.title"
              :value="item.id"
              v-for="(item, index) in cpfzArr"
              :key="index"
              ></el-option>
              <!-- :props="props" -->
          </el-select>

          <el-table :data="tableData1" :border="false" style="width: 100%">
            <el-table-column prop="date" label="配送区域" width="350">
            </el-table-column>
            <el-table-column prop="name" label="首件(个)" width="286">
            </el-table-column>
            <el-table-column prop="name" label="运费(元)" width="286">
            </el-table-column>
            <el-table-column prop="name" label="续件(个)" width="286">
            </el-table-column>
            <el-table-column prop="name" label="续费(元)" width="286">
            </el-table-column>
          </el-table>
        </el-form-item>

        <el-form-item label="商品规格">
          <el-button @click="addgg">添加规格</el-button>
        </el-form-item>
        <div v-if="ggmFlag">
          <el-form-item label="规格名">
            <!-- <template slot-scope="scope"> -->
            <el-select v-model="form.ggm" placeholder="请选择">
              <el-option
                :label="item.propName"
                :value="item.propId"
                v-for="(item, index) in ggmArr"
                :key="index"
                @click.native="onggm(item.propId)"
              ></el-option>
            </el-select>
            <!-- </template> -->
          </el-form-item>
          <el-form-item label="规格值">
            <el-select v-model="form.ggz" placeholder="请选择">
              <el-option
                :label="item.title"
                :value="item.id"
                v-for="(item, index) in ggzArr"
                :key="index"
                ></el-option>
                <!-- :props="props" -->
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="affirm"
              >确认</el-button
            >
            <el-button size="small" @click="cancel">取消</el-button>
          </el-form-item>
        </div>
        <el-form-item>
          <el-table :data="tableData2" border style="width: 100%">
            <el-table-column label="销售价" width="160">
              <template slot-scope="scope">
                <el-input-number
                  v-model="num"
                  controls-position="right"
                  @change="handleChange(scope.row)"
                  :min="1"
                  :max="10"
                ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column label="市场价" width="160">
              <template slot-scope="scope">
                <el-input-number
                  v-model="num"
                  controls-position="right"
                  @change="handleChange(scope.row)"
                  :min="1"
                  :max="10"
                ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column label="库存" width="160">
              <template slot-scope="scope">
                <el-input-number
                  v-model="num"
                  controls-position="right"
                  @change="handleChange(scope.row)"
                  :min="1"
                  :max="10"
                ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column label="商品重量(kg)" width="210">
              <template slot-scope="scope">
                <el-input-number
                  v-model="num"
                  controls-position="right"
                  @change="handleChange(scope.row)"
                  :min="1"
                  :max="10"
                ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column label="商品体积(㎡)" width="210">
              <template slot-scope="scope">
                <el-input-number
                  v-model="num"
                  controls-position="right"
                  @change="handleChange(scope.row)"
                  :min="1"
                  :max="10"
                ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="594">
              <template slot-scope="scope">
                <div @click="forbidden(scope.row)">禁用</div>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="产品详情">
          <tinymce-editor
            ref="editor"
            v-model="form.content"
            :disabled="disabled"
            @onClick="onClick"
          >
          </tinymce-editor>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import TinymceEditor from "@/components/tinymce-editor/tinymce-editor";
export default {
  data() {
    return {
      // 规格名显示
      ggmFlag: false,
      // 运费设置显示
      yfszFlag: false,
      form: {
        // 产品名称
        prodName: "",
        // 产品分组
        tagList: [],
        // 产品规格
        specList: [],

        // 产品卖点
        brief: "",

        // 产品分类
        categoryId: "",
        // 商品规格
        spggArr: [],
        // 状态
        status: "",
        // 规格值
        ggz: "",
        // 配送方式
        deliveryModeVo: {
          hasShopDelivery: false,
          hasUserPickUp: false,
        },
        // 产品详情
        content: " ",
      },
      // 富文本
      disabled: false,
      // 数
      num: 0,
      value: [],
      tableData1: [],
      tableData2: [],
      // 图片
      dialogImageUrl: "",
      dialogVisible: false,
      cpflArr: [], // 产品分类
      cpfzArr: [], // 产品分组
      yfszArr: [], // 运费设置
      ggmArr: [], // 规格名
      ggzArr: [], // 规格值
    };
  },
  components: {
    TinymceEditor,
  },
  mounted() {
    this.yfszList(); // 运费设置
    this.cpfzList(); // 产品分组
    this.cpflList(); // 产品分类
    this.ggmList(); // 规格名
  },
  methods: {
    // 添加规格
    addgg() {
      this.ggmFlag = !this.ggmFlag;
    },
    //确定
    affirm() {
      console.log("确定");
    },
    // 取消
    cancel() {
      console.log("取消");
    },
    onSubmit() {
      console.log("submit!");
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // buildTree(data) {
    //   const map = {};
    //   const roots = []; // 首先将所有节点存储到 map 中

    //   data.forEach((item) => {
    //     map[item.categoryId] = { ...item }; // 先不初始化 children
    //   }); // 遍历数据，将子节点放入对应的父节点中

    //   data.forEach((item) => {
    //     if (item.parentId !== 0) {
    //       // 如果父节点不存在 children，则初始化
    //       if (!map[item.parentId].children) {
    //         map[item.parentId].children = [];
    //       }
    //       map[item.parentId].children.push(map[item.categoryId]);
    //     } else {
    //       roots.push(map[item.categoryId]);
    //     }
    //   }); // 移除没有子节点的 children 属性

    //   const removeEmptyChildren = (node) => {
    //     if (node.children && node.children.length === 0) {
    //       delete node.children; // 移除空的 children 属性
    //     } else if (node.children) {
    //       node.children.forEach(removeEmptyChildren); // 递归处理子节点
    //     }
    //   };

    //   roots.forEach(removeEmptyChildren); // 处理根节点
    //   console.log(roots, "roots");

    //   return roots;
    // },
    // 规格名点击
    onggm(row) {
      console.log(row);

      this.$axios
        .get("/api/prod/spec/listSpecValue/" + row, {
          params: {
            t: new Date().getTime(),
          },
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        })
        .then((res) => {
          console.log(res);
          if (res.data.code == "00000") {
            // this.cpflArr = res.data.data;
            this.ggzArr = res.data.data;

          }
        });
    },
    // 富文本 鼠标单击的事件
    onClick(e, editor) {
      console.log("Element clicked");
      console.log(e);
      console.log(editor);
    },
    // 产品分类
    cpflList() {
      this.$axios
        .get("/api/prod/category/listCategory", {
          data: {
            t: new Date().getTime(),
          },
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        })
        .then((res) => {
          //   console.log(res, "产品分类");
          if (res.data.code == "00000") {
            // this.cpflArr = res.data.data;
            // this.buildTree(res.data.data);
          }
        });
    },
    // 产品分组
    cpfzList() {
      this.$axios
        .get("/api/prod/prodTag/listTagList", {
          params: {
            t: new Date().getTime(),
          },
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        })
        .then((res) => {
          //   console.log(res, "产品分组");
          if (res.data.code == "00000") {
            this.cpfzArr = res.data.data;
            console.log(this.cpfzArr);
          }
        });
    },
    // 运费设置
    yfszList() {
      this.$axios
        .get("/api/shop/transport/list", {
          data: {
            t: new Date().getTime(),
          },
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        })
        .then((res) => {
          //   console.log(res, "运费设置");
          if (res.data.code == "00000") {
            this.yfszArr = res.data.data;
            // console.log(this.yfszArr);
          }
        });
    },

    // 产品分类
    handleChange(value) {
      console.log(value);
      this.categoryId = value;
      this.yfszFlag = !this.yfszFlag;
    },
    // 规格名
    ggmList() {
      this.$axios
        .get("/api/prod/spec/list", {
          data: {
            t: new Date().getTime(),
          },
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        })
        .then((res) => {
          //   console.log(res, "规格名");
          if (res.data.code == "00000") {
            this.ggmArr = res.data.data;
            console.log(this.ggmArr, "规格名");
          }
        });
    },
    // 规格值
    // ggzList() {
    //   this.$axios
    //     .get("/api/prod/spec/list", {
    //       data: {
    //         t: new Date().getTime(),
    //       },
    //       headers: {
    //         Authorization: localStorage.getItem("token"),
    //       },
    //     })
    //     .then((res) => {
    //       //   console.log(res, "规格名");
    //       if (res.data.code == "00000") {
    //         this.ggzArr = res.data.data;
    //         console.log(this.ggzArr, "规格值");
    //       }
    //     });
    // },
  },
};
</script>

<style lang="scss" scoped>
.prodInfo {
  padding: 20px;
  background-color: #eef1f2;
}
.prodInfo-nr {
  background-color: #fff;
  padding: 20px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>